<template>
  <el-dialog title="编辑部门" :visible.sync="showEdit" width="400px"
             @close="$emit('update:showEditDepartment', false)" :close-on-click-modal="false">
    <el-form label-position="right" ref="editInfo" :rules="rules" :model="editInfo" label-width="90px">
      <el-form-item label="部门名称" prop="name">
      <el-input v-model="editInfo.name"></el-input>
    </el-form-item>
      <el-form-item label="职能描述" prop="remark">
        <el-input v-model="editInfo.remark" type="textarea" :rows="4" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="showEdit = false">取 消</el-button>
        <el-button type="primary" @click="editDepartment('editInfo')">确 定</el-button></el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  export default {
    name: "EditDepartment",
    props: {
      showEditDepartment: {
        type: Boolean,
        default: false
      },
      defaultInfo:{
        type: Object,
        default: () => {
          return {
            id:"",
            name:"",
            remark:""
          }
        }
      }
    },
    data() {
      return {
        showEdit: this.showEditDepartment,
        editInfo:{
          name:"",
          remark:""
        },
        rules: {
          name: [
            {required: true, message: '请输入部门名称', trigger: 'blur'}
          ],
          remark: [
            {required: true, message: '请输入职能描述', trigger: 'blur'}
          ]
        }
      }
    },
    watch: {
      showEditDepartment(val) {
        this.showEdit = val
      },
      defaultInfo(val){
        this.editInfo = {...val}
      }
    },
    methods: {
      editDepartment(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            ajax.post(apis.auth.updateDepartment, {...this.editInfo})
              .then(res => {
                if (res.success === true) {
                  this.$message({
                    message: res.message,
                    type: 'success'
                  });
                  this.showEdit = false
                  this.$emit("refreshDepartmentList")
                } else {
                  this.$message({
                    message: res.message,
                    type: 'error'
                  })
                }
              })
          }
          else{
            return false;
          }
        });
      }
    },
    created() {
    }
  }
</script>

<style lang="scss" scoped>
  .i-plus {
    text-align: center;
  }
</style>
